<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="./WKWebViewJSHandler.js"></script>
    <title>测试html</title>
</head>

<body>


    <div id="page">
        <el-containe style="height: 100%; ">
            <el-header
                style="height: 100px; display: flex; justify-content: center; align-items: center; background-color: black;">
                <el-row>
                    <el-col :span="24">
                        <span style="color: aquamarine; font-size: 30px">WKWebView: js call OC</span>
                    </el-col>
                </el-row>
            </el-header>


            <el-main style="height: 900px; background-color: coral;">

                <el-button type="warning" plain @click="callOCfunc">js按钮: 点我改变oc标题</el-button>

            </el-main>
            <el-footer
                style="height: 100px; display: flex; justify-content: center; align-items: center; background-color: black;">
                <span style="color:#99f; font-size: 30px">END</span>
            </el-footer>

            </el-container>

    </div>


    <script>


        function ocCallJS(param) {
            alert(param);
        }

        var page = new Vue({
            el: '#page',
            created() {
            },
            data: {
                name: '====== oc / js ======',
                location: '待返回的信息',
                location2: '待返回的信息',
            },
            methods: {
                callOCfunc: function () {

                    // xwft对象, 由oc代码通过context上下文来挂载, js层面直接调用该对象来验证是否oc挂载成功
                    if (window.xwft === undefined) {
                        alert('xwft 未挂载, 请挂载xwft');
                        return;
                    } else {
                    }
                    // 在oc端采用 WKWebView时,  js端必须要以下列方式调用原生方法, 否则oc端不响应
                    window.webkit.messageHandlers.changeOCtitle.postMessage({ param: 'ssssssss' })
                }
            },
        })
    </script>


</body>
<style>
    body {
        background-color: darkcyan;
        width: 100%;
        height: 100%;
        margin: 0px;
    }

    #page {
        background-color: #fff;
    }
</style>

</html>